<template>
  <div class="roles">
    <div class="breadcrumb-wrap">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>权限管理</el-breadcrumb-item>
        <el-breadcrumb-item>权限列表</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <el-button type="primary" size="mini" icon="el-icon-plus" @click="rolesDialogStatus = true">添加角色</el-button>

    <el-table :data="rolesList" style="width: 100%" max-height="450">
      <el-table-column type="expand">
        <template slot-scope="scope">
          <el-row v-for="item in scope.row.children" :key="item.id">
            <el-col :span="4">
              <el-tag closable @close="_deleteRights(scope.row.id, item.id)">{{item.authName}}</el-tag>
              <i class="el-icon-arrow-right"></i>
            </el-col>
            <el-col :span="20">
              <el-row v-for="_item in item.children" :key="_item.id">
                <el-col :span="6">
                  <el-tag closable @close="_deleteRights(scope.row.id, _item.id)">{{_item.authName}}</el-tag>
                  <i class="el-icon-arrow-right"></i>
                </el-col>
                <el-col :span="18">
                  <el-tag
                    @close="_deleteRights(scope.row.id, __item.id)"
                    v-for="__item in _item.children"
                    :key="__item.id"
                    closable
                  >{{__item.authName}}</el-tag>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
        </template>
      </el-table-column>
      <el-table-column type="index" width="50"></el-table-column>
      <el-table-column prop="roleName" label="角色名称" width="180"></el-table-column>
      <el-table-column prop="roleDesc" label="角色描述" width="180"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            type="primary"
            icon="el-icon-edit"
            circle
            size="mini"
            @click="_editRoles(scope.row)"
          ></el-button>
          <el-button
            type="danger"
            icon="el-icon-delete"
            circle
            size="mini"
            @click="_deleteUser(scope.row)"
          ></el-button>
          <el-button
            type="success"
            icon="el-icon-check"
            circle
            size="mini"
            @click="openEditRightsDialog(scope.row)"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog title="添加角色" :visible.sync="rolesDialogStatus" width="600px">
      <el-form
        :model="roleForm"
        ref="form"
        label-position="right"
        label-width="80px"
        :rules="rules"
      >
        <el-form-item label="角色名称" prop="roleName">
          <el-input v-model="roleForm.roleName"></el-input>
        </el-form-item>
        <el-form-item label="角色描述" prop="roleDesc">
          <el-input v-model="roleForm.roleDesc"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="rolesDialogStatus = false">取 消</el-button>
        <el-button type="primary" @click="_addRoles">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="修改角色" :visible.sync="editRolesDialogStatus" width="600px">
      <el-tree
        :data="rightsLists"
        show-checkbox
        node-key="id"
        :default-expand-all="true"
        :props="defaultProps"
        ref="tree"
      ></el-tree>
      <div slot="footer" class="dialog-footer">
        <el-button @click="editRolesDialogStatus = false">取 消</el-button>
        <el-button type="primary" @click="_editRights">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getRolesList, deleteRights, addRoles, getRights, editRights } from "@/http/api";
import "@/stylus/index.styl";
export default {
  data() {
    function validate(rule, value, callback) {
      if (value == 123) {
        callback(new Error("不能是123"));
      } else {
        callback();
      }
    }
    return {
      rolesList: [],
      rolesDialogStatus: false,
      roleForm: {
        roleName: "",
        roleDesc: ""
      },
      rules: {
        roleName: [
          {
            required: true,
            message: "不能为空",
            trigger: "blur"
          },
          {
            validator: validate,
            trigger: ["blur", "change"]
          }
        ]
      },
      editRolesDialogStatus: false,
      rightsLists: [],
      defaultProps: {
        children: 'children',
        label: 'authName'
      },
      roleId: ''
    };
  },
  methods: {
    //获取角色列表
    _getRolesList() {
      getRolesList().then(res => {
        this.rolesList = res.data;
      });
    },
    //删除权限
    _deleteRights(roleId, rigthsId) {
      deleteRights(roleId, rigthsId).then(res => {
        this._getRolesList();
      });
    },
    //添加角色
    _addRoles() {
      this.$refs.form.validate(validate => {
        if (validate) {
          addRoles(this.roleForm).then(res => {
            this.$message({
              type: "success",
              message: "添加成功"
            });
            this.rolesDialogStatus = false;
            this.$refs.form.resetFields();
            this._getRolesList();
          });
        }
      });
    },
    //打开编辑角色弹窗
    openEditRightsDialog(val) {
      let arr = val.children;
      console.log(arr)
      this.editRolesDialogStatus = true
      this.roleId = val.id
      getRights()
      .then(res => {
        this.rightsLists = res.data
        this.$nextTick(()=>{
          this.$refs.tree.setCheckedNodes(arr)
        })
      })
    },
    //修改权限
    _editRights() {
      let rids = this.$refs.tree.getCheckedKeys().join(",");
      let roleId = this.roleId
      editRights(roleId, rids)
      .then(res => {
        this.$message({
          type: 'success',
          message: '修改权限成功'
        })
        this.editRolesDialogStatus = false
        this._getRolesList()
      })
    }
  },
  created() {
    this._getRolesList();
  }
};
</script>
<style scoped lang="stylus">
.roles
  padding 15px
  background #fff
  border-radius 10px
  .breadcrumb-wrap
    margin-bottom 20px
</style>